<template>
    <div class="app_container">
        <div class="app_container_aside" id="AppContainerAsideId" v-show="appContainerAsideFlag">
            <a-menu 
                v-model:openKeys="openKeys" 
                v-model:selectedKeys="selectedKeys" 
                mode="inline" 
                theme="dark"
            >
                <template v-for="item in showMenus" :key="item.path">
                    <a-menu-item v-if="!item.hasOwnProperty('children')" :key="item.path">
                        <template #icon>
                            <AppstoreOutlined />
                        </template>
                        <RouterLink :to="item.path">{{ item.title }}</RouterLink>
                    </a-menu-item>
                    <a-sub-menu v-if="item.hasOwnProperty('children')"  :key="item.path">
                        <template #icon>
                            <MailOutlined />
                        </template>
                        <template #title>{{ item.title }}</template>
                        <a-menu-item v-for="subItem in item.children" :key="subItem.path">
                            <template #icon>
                                <AppstoreOutlined />
                            </template>
                            <RouterLink :to="subItem.path">{{ subItem.title }}</RouterLink>
                        </a-menu-item>
                    </a-sub-menu>
                </template>
            </a-menu>
        </div>
        <div class="app_container_main">
            <RouterView />
        </div>
    </div>
</template>

<script setup>
import { ref, watch, computed, onMounted } from "vue";
import { AppstoreOutlined, MailOutlined } from "@ant-design/icons-vue";
import { routes } from "./router";
import router from "./router";

const openKeys = ref([]);
const selectedKeys = ref([]);
// 菜单侧栏是否展示标识
const appContainerAsideFlag = ref(false);

// 生成展示的菜单
const showMenus = computed(() => {
    let copyRoutes = JSON.parse(JSON.stringify(routes));
    copyRoutes = copyRoutes.filter(item => !["/"].includes(item.path))
    return copyRoutes
})

// 监听路由变化
watch(() => router.currentRoute.value, (newValue, oldValue) => {
        if(newValue.fullPath) {
            if (!selectedKeys.value.includes(newValue.fullPath)) {
                selectedKeys.value = [newValue.fullPath];
                if(newValue?.meta?.parent) {
                    openKeys.value = [newValue.meta.parent];
                } else {
                    openKeys.value = []
                }
            }
        }
    }, {
        immediate: true,
        deep: true,
    }
);


onMounted(() => {
    // 为根容器添加鼠标事件
    document.getElementById("app").addEventListener("mousemove", function (e) {
        if (e.offsetX === 0 && !appContainerAsideFlag.value) {
            // 显示菜单
            appContainerAsideFlag.value = true;
        } else if(e.offsetX > 200 && appContainerAsideFlag.value) {
            // 隐藏菜单
            appContainerAsideFlag.value = false;
        }
    });
});
</script>
<style lang="scss">
.app_container {
    display: flex;
    width: 100%;
    height: 100%;
    .app_container_aside {
        position: fixed;
        width: 200px;
        height: 100%;
        background-color: #001529;
        overflow: auto;
        &::-webkit-scrollbar {
            width: 0px;
        }
    }
    .app_container_main {
        width: calc(100% - 0px);
        height: 100%;
        padding: 0px;
    }
}
</style>